<template>
  <div class="lowest template">
    <div class="lowest-content" v-if="!hideNav">
      <div class="header-tip flex">
        <span>薪酬设置流程：【设置工资表模板】→【企业设置】→【设置计薪规则】→【关联薪资组】</span>
        <Icon type="ios-close" size="18" />
      </div>

      <div class="guide-intro">
        <div class="guide-title">使用指南</div>
        <div class="guide-content">
          <div class="guide-item">1、设置企业的工资表模板，即核算时的工资表。设置后，请到“计薪规则”选择“薪资组”，关联模板以及适用人员范围。</div>
          <div class="guide-item">2、薪酬结构即所有工资表项目的汇总，由薪酬结构启用的项目组成工资表模板。如需编辑项目，请点击“编辑薪酬结构”。</div>
          <div class="guide-item">3、如有多个类似的工资表模板，可以在操作栏“复制”对应的工资表。将相同项目复制到新模板后继续编辑，减少重复操作。</div>
        </div>
      </div>

      <div class="table-section">
        <div class="table-section-header">
          <Button class="save-btn-green mr12" @click="toDetail">新增最低工资</Button>
          <Button class="pierced-nobg" @click="toHistory">历史最低工资</Button>
        </div>
        <div class="table-wrap">
          <Table width="100%" :columns="columns" :data="data" class="table2"></Table>
        </div>
      </div>
    </div>
    <div class="lowest-children" v-if="hideNav">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          title: "模版名称",
          key: "name"
        },
        {
          title: "工资项",
          key: "age"
        },
        {
          title: "适用薪资组",
          key: "province"
        },
        {
          title: "备注",
          key: "city"
        },
        {
          title: "操作",
          key: "action",
          width: 120,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "text",

                    className: "table-action-btn"
                  },
                  class: "table-action-btn",
                  on: {
                    click: () => {
                      this.toDetail(params.index);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "span",
                {
                  props: {
                    type: "text",

                    className: "table-action-btn"
                  },
                  class: "table-action-btn",
                  on: {
                    click: () => {
                      this.toDetail(params.index);
                    }
                  }
                },
                "..."
              )
            ]);
          }
        }
      ],
      data: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          province: "America",
          selection: "",
          avatar: "@/assets/images/avatar-table.png",
          city: "New York",
          zip: 100000
        },
        {
          name: "Jim Green",
          age: 24,
          address: "Washington, D.C. No. 1 Lake Park",
          province: "America",
          city: "Washington, D.C.",
          zip: 100000
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          province: "Australian",
          city: "Sydney",
          zip: 100000
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          province: "Canada",
          city: "Ottawa",
          zip: 100000
        }
      ]
    };
  },
  methods: {
    add() {
      this.$router.push("/payroll/salary/settings/lowest/add");
    },
    toDetail() {
      this.$router.push("/payroll/salary/settings/lowest/detail");
    },
    toHistory() {
      this.$router.push("/payroll/salary/settings/lowest/history");
    }
  },
  computed: {
    hideNav() {
      //隐藏tabs
      let route = this.$route.matched;
      let matched = route[route.length - 1].path;
      return (
        matched.includes("lowest/add") ||
        matched.includes("lowest/detail") ||
        matched.includes("lowest/history")
      );
    }
  }
};
</script>
<style lang="scss" scoped src='../index.scss'>
</style>